<template>
  <div class="header">
    <div class="header-left">
      <img
        src="http://m.beta.dny.group/userfile/upload/2019-06-14/15604745740091219300831577715303.jpg"
        alt
      />
    </div>
    <div class="header-center">
      <div class="search-input">
        <span class="iconfont icon-iconfontzhizuobiaozhun22"></span>搜索
      </div>
    </div>
    <div class="header-right iconfont icon-fenlei"></div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<style lang="stylus" scoped>
@import '~styles/base.styl';

.header {
  height: 0.86rem;
  line-height: 0.86rem;
  background: $bgColorWhite;
  color: $colorGray;
  display: flex;

  .header-left {
    font-size: $font24;
    text-align: center;
    float: left;
    width: 0.8rem;
    margin: 0.05rem 0.1rem;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .header-center {
    margin-left: 0.15rem;
    flex: 1;
    display: flex;

    .search-input {
      color: #666;
      margin-top: 0.15rem;
      height: 0.56rem;
      line-height: 0.56rem;
      background: #fff;
      border-radius: 0.1rem;
      padding-left: 0.1rem;
      font-size: $font24;

      span {
        font-size: $iconfont32;
        margin-right: 0.1rem;
      }
    }
  }

  .header-right {
    width: 1.24rem;
    float: right;
    text-align: center;
    font-size: $iconfont48;
    color: $colorGreen;
  }
}
</style>
